<!--
 * @Description: ,
 * @Date: 2023-03-16 11:39:45
 * @LastEditors: czp
 * @LastEditTime: 2023-05-08 10:06:16
-->
<template>
	<!-- <el-carousel class="banner-box" indicator-position="none" arrow="always">
		<el-carousel-item v-for="(img, i) in imgList" :key="i">
			<el-image class="b-img" fit="cover" :src="img + '?imageMogr2/thumbnail/375x'" />
		</el-carousel-item>
	</el-carousel> -->
	<div :style="{ width: width, height: height }">
		<swiper class="banner-box" :modules="[Autoplay]" :loop="true" :autoplay="true as any">
			<swiper-slide class="swiper-item" v-for="(item, index) in imgList" :key="index">
				<el-image class="b-img" fit="cover" :src="item + '?imageMogr2/thumbnail/750x'" />
			</swiper-slide>
		</swiper>
	</div>
</template>
<script setup lang="ts" name="BaseSwiper">
import { Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/autoplay";
defineProps<{ imgList: string[]; width?: string; height?: string }>();
</script>
<style lang="scss" scoped>
.banner-box {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	.b-img {
		width: 100%;
		height: 100%;
		vertical-align: middle;
	}
}

@media all and (max-width: 750px) {
	.banner-box {
		width: 100%;
	}
}
</style>
